<template>
  <div class="">
    <div class="mindMapDemo">
      <div id="mindMapContainer"></div>
      <div class="toolbar">
        <a-button type="primary" @click="inserImage" :disabled:="hasRoot && hasGeneralization">插入图片</a-button>
        <a-button type="primary" @click="insertIcon" :disabled:="hasRoot && hasGeneralization">插入图标</a-button>
        <a-button type="primary" @click="insertLink" :disabled:="hasRoot && hasGeneralization">插入超链接</a-button>
        <a-button type="primary" @click="insertNote" :disabled:="hasRoot && hasGeneralization">插入备注</a-button>
        <a-button type="primary" @click="insertTag" :disabled:="hasRoot && hasGeneralization">插入标签</a-button>
        <a-button type="primary" @click="insertGa" :disabled:="hasRoot && hasGeneralization">插入概要</a-button>
        <a-button type="primary" @click="insertLine" :disabled:="hasRoot && hasGeneralization">插入关联线</a-button>
      </div>
    </div>
    <div ref="mindmap" class="mindmap-container"></div>
    <markmap :content="markdownContent" />
  </div>
</template>

<script>
import Markmap from './Markmap.vue'
import { shallowRef } from 'vue'
// 导入 simple-mind-map
import SimpleMindMap from 'simple-mind-map'

export default {
  components: {
    Markmap,
  },
  name: 'SimpleMindMap',
  data() {
    return {
      mindMap: null, // 用于保存实际 SimpleMindMap 实例的引用
      // 思维导图的数据，作为组件数据存在
      activeNodes: null,
      content: `# markmap

- beautiful
- useful
- easy
- interactive`,
    }
  },
  mounted() {
    this.createMindMap()

    this.$nextTick(function () {
      // 当前激活的节点列表
      this.activeNodes = []
      // 监听节点激活事件
      this.mindMap.on('node_active', (node, nodeList) => {
        console.log('node', nodeList)
        this.activeNodes.value = nodeList
      })
    })
  },
  computed: {
    hasRoot() {
      try {
        return (
          this.activeNodes.value.findIndex((node) => {
            return node.isRoot
          }) !== -1
        )
      } catch {}
    },
    hasGeneralization() {
      try {
        return (
          this.activeNodes.value.findIndex((node) => {
            return node.isGeneralization
          }) !== -1
        )
      } catch {}
    },
  },
  methods: {
    createMindMap() {
      // 如果已经存在一个实例，先销毁它
      if (this.mindMap) {
        this.mindMap.destroy()
        this.mindMap = null
      }
      // 基于最新数据创建 SimpleMindMap 实例      确保容器 DOM 加载完成

      this.$nextTick(() => {
        // 初始化思维导图，传入容器元素和数据
        this.mindMap = new SimpleMindMap({
          el: this.$refs.mindmap,
          text: '中心主题',
          data: {
            data: {
              text: '根节点',
            },
            children: [
              {
                data: {
                  text: '二级节点',
                },
                children: [
                  {
                    data: {
                      text: '三级节点',
                    },
                    children: [
                      {
                        data: {
                          text: '四级节点',
                        },
                        children: [],
                      },
                    ],
                  },
                ],
              },
              {
                data: {
                  text: '二级节点',
                },
                children: [],
              },
            ],
          },
        })

        // 渲染思维导图
        this.mindMap.render()
      })
    },
    // 插入图片
    inserImage() {
      this.activeNodes.value.forEach((node) => {
        console.log('node', node)
        node.setImage({
          url: 'https://lxqnsys.oss-cn-beijing.aliyuncs.com/qlx/xh2AXkBxYm5jGe5fD7DWYrC5b.png',
          title: '图片的标题或描述',
          width: 100, // 图片的宽高也不能少
          height: 100,
        })
      })
    },

    // 插入图标
    insertIcon() {
      const iconList = ['priority_1', 'priority_2']
      this.activeNodes.value.forEach((node) => {
        node.setIcon(iconList)
      })
    },

    // 插入超链接
    insertLink() {
      this.activeNodes.value.forEach((node) => {
        node.setHyperlink('http://lxqnsys.com/', '理想青年实验室')
      })
    },

    // 插入备注
    insertNote() {
      this.activeNodes.value.forEach((node) => {
        node.setNote('备注内容')
      })
    },

    // 插入标签
    insertTag() {
      this.activeNodes.value.forEach((node) => {
        node.setTag(['标签1', '标签2'])
      })
    },

    // 插入概要
    insertGa() {
      this.mindMap.execCommand('ADD_GENERALIZATION', {
        text: '自定义概要内容',
      })
    },

    // 插入概要
    insertLine() {
      this.mindMap.associativeLine.createLineFromActiveNode()
    },

    // 插入节点
    addNode(parentNode, nodeLabel) {
      // 把新节点添加到 parentNode 的 children 中
      if (!parentNode.children) {
        this.$set(parentNode, 'children', [])
      }
      parentNode.children.push({
        text: nodeLabel,
      })
      // 重新渲染思维导图
      this.createMindMap()
    },
  },
}
</script>

<style>
.mindmap-container {
  width: 100%;
  height: 600px; /* 设定高度 */
  border: 1px solid #ccc; /* 可选，便于看到边界 */
}
</style>